<script setup>
import {ref} from 'vue'
import {Head, useForm} from '@inertiajs/vue3';
import {Message} from "@arco-design/web-vue";
import {route} from "ziggy-js";

const captchaSrc = ref(`/captcha/math?t=${Math.random()}`)
const FormRef = ref()
const form = useForm({
    phone: '',
    password: '',
    captcha: '',
    remember: true,
})

const rules = ref({
    phone: [
        {required: true, length: 11, message: '请输入正确的手机号',tigger: ['blur']},
        {pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号格式', trigger: 'blur' }
    ],
    password: [
        {required: true, message: '请输入正确的密码',tigger: ['blur']},
        {minLength: 6, maxLength: 16, message: '请输入密码长度6-16位', tigger: ['blur']},
        {pattern: /^(?=.*[A-Za-z])(?=.*\d).+$/, message: '请输入密码必须包含字母和数字', tigger: ['blur']}
    ],
    captcha: [{required: true, message: '请输入图形验证码',tigger: ['blur']}],
})

const reloadCaptcha = () => {
    captchaSrc.value = `/captcha/math?t=${Math.random()}`;
}

const handleSubmit = async() => {
    const flag = await FormRef.value.validate();
    if (flag){
        return ;
    }

    form.post(route('authenticate'), {
        onSuccess: () => {
            Message.success('登录成功')
        },
        onError: (errors) => {
            console.log(errors)
            reloadCaptcha()
            const fields = {};
            // 遍历所有错误
            for (const [fieldName, messages] of Object.entries(errors)) {
                // 构造字段对象
                fields[fieldName] = {
                    status: 'error',
                    message: messages
                };
            }
            FormRef.value.setFields(fields);
        }
    })
}

onMounted(() => {
    captchaSrc.value = `/captcha/math?t=${Math.random()}`;
})
</script>

<template>
  <Head title="管理员登录" />
    <div class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-blue-900 flex items-center justify-center p-4">
      <div class="w-full max-w-md">
        <a-card :header-style="{
            background: 'linear-gradient(to right, #3b82f6, #8b5cf6)',
        }"
        class="overflow-hidden border-0 shadow-lg"
        >
          <!-- 顶部渐变条 -->
          <div class="h-2 bg-gradient-to-r from-blue-500 via-indigo-500 to-purple-500"></div>

          <!-- 登录表单 -->
          <div class="p-6 sm:p-8">
            <!-- 登录标题 -->
            <div class="text-center mb-6">
              <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-blue-100 text-blue-600 mb-4">
                <Shield class="w-8 h-8" />
              </div>
              <h1 class="text-2xl font-bold text-gray-800 mb-1">管理员登录</h1>
              <p class="text-gray-500">请输入您的账号信息进行登录</p>
            </div>

            <a-form
                ref="FormRef"
                :model="form"
                :rules="rules"
              class="mt-4"
              layout="vertical"
              @submit="handleSubmit"
            >
              <!-- 手机号输入框 -->
              <a-form-item
                :rules="[{ required: true, message: '请输入手机号' }, { pattern: /^1[34578]\d{9}$/, message: '请输入正确的手机号' }]"
                :validate-trigger="['input', 'blur']"
                field="phone"
                label="手机号"
              >
                  <a-input
                      v-model="form.phone"
                      allow-clear
                      autocomplete="off"
                      placeholder="请输入登录手机号"
                  >
                      <template #prefix>
                          <icon-mobile/>
                      </template>
                  </a-input>
              </a-form-item>

              <!-- 验证码输入框 -->
              <a-form-item
                :rules="[{ required: true, message: '请输入图形验证码' }]"
                :validate-trigger="['input', 'blur']"
                field="captcha"
                label="图形验证码"
              >
                <div class="flex space-x-3">
                    <a-input
                        v-model="form.captcha"
                        allow-clear
                        autocomplete="off"
                        class="flex-1"
                        placeholder="请输入图形验证码"
                    >
                        <template #prefix>
                            <icon-safe/>
                        </template>
                    </a-input>
                  <a-tooltip content="点击刷新验证码">
                    <div v-if="captchaSrc"
                      class="relative w-32 h-11 cursor-pointer" @click="reloadCaptcha">
                      <img
                        :src="captchaSrc"
                        alt="验证码"
                        class="absolute inset-0 w-full h-full object-cover rounded-md hover:opacity-90 transition-opacity"
                      />
                    </div>
                  </a-tooltip>
                </div>
              </a-form-item>

              <!-- 密码输入框 -->
              <a-form-item
                :rules="[
                  { required: true, message: '请输入密码' },
                  { min: 6, message: '密码长度不能小于6' },
                  { max: 16, message: '密码长度不能大于16' },
                  { pattern: /^(?=.*[A-Za-z])(?=.*\d).+$/, message: '密码必须包含字母和数字' }
                ]"
                :validate-trigger="['input', 'blur']"
                field="password"
                label="密码"
              >
                  <a-input-password
                      v-model="form.password"
                      allow-clear
                      autocomplete="off"
                      placeholder="请输入登录密码"
                  >
                      <template #prefix>
                          <icon-lock/>
                      </template>
                  </a-input-password>
              </a-form-item>

              <!-- 登录按钮 -->

                <a-form-item>
                    <a-button class="login-btn" html-type="submit" long size="large" type="primary"> 登录</a-button>
                </a-form-item>
            </a-form>
          </div>
        </a-card>

        <!-- 底部信息 -->
        <div class="mt-6 text-center text-sm text-gray-500">
          <p>© 2024 管理系统 - 版权所有</p>
        </div>
      </div>
    </div>
</template>

<style lang="scss" scoped>
/* 自定义动画效果 */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* 登录卡片悬停效果 */
.arco-card {
  transition: all 0.3s ease;
}

.arco-card:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

/* 输入框聚焦效果增强 */
.arco-input:focus-within {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

/* 按钮动画效果 */
.arco-btn-primary {
  transition: all 0.3s ease;
}

.arco-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.arco-btn-primary:active {
  transform: translateY(0);
}

/* 验证码刷新按钮动画 */
.cursor-pointer {
  transition: transform 0.2s ease;
}

.cursor-pointer:active {
  transform: scale(0.95);
}
</style>
